<!--
 * @Author: your name
 * @Date: 2021-04-05 20:38:00
 * @LastEditTime: 2021-06-01 20:17:06
 * @LastEditors: Please set LastEditors
 * @Description: Q&A 列表 => 详情
 * @FilePath: /medicine-web/src/views/qanda/detail/index.vue
-->
<template>
  <div class="ques-and-answ-detail">
    <p class="document-detail__title font-pattern-5" v-html="article.question"></p>
    <div class="document-detail__content font-pattern-3">
      <p style="margin-bottom: 17px;" v-html="article.answer"></p>
    </div>
    <!-- <p class="font-pattern-3">文献来源：文献名称文献名称文献名称文献名称文献名称文献名称</p>
    <p class="font-pattern-3">链接：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> -->
    <customBtn :btnStr="'下载'" @handClick="handleDownload(article)"></customBtn>
    <customBtn :btnStr="'收藏'" @handClick="handleCollection"></customBtn>
    <a-popover v-model="showShare" trigger="click">
      <a slot="content" class="share-icon-list">
        <img style="width: 18px; height: 18px; cursor:pointer;" :src="require('@/assets/image/xinlang.png')" alt="" @click.stop="showXinLang(article)">
        <img style="width: 18px; height: 18px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/qq.png')" alt="" @click.stop="showQQ(article)">
        <img style="width: 20px; height: 20px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/wechat.png')" alt="" @click.stop="showWechat(article)">
      </a>
      <customBtn :btnStr="'分享'" @handClick="handleShare"></customBtn>
    </a-popover>
    <div class="wechat-qr-code__container" v-if="showQRCode">
      <div class="wechat-qr-code__title">手机微信扫码分享</div>
      <img class="wechat-qr-code__close" :src="require('@/assets/image/close.png')" alt="" @click.stop="showQRCode = false">
      <div id="wechat-qr-code"></div>
    </div>
    <div class="wechat-qr-code__modal" v-if="showQRCode" @click.stop="showQRCode = false"></div>
  </div>
</template>
<script>
import customBtn from '@/components/CustomBtn/index.vue'
import { saveAs } from 'file-saver'
import share from '@/utils/share'
export default {
  name: 'quesAndAnswDetail',
  components: { customBtn },
  data () {
    return {
      showShare: false,
      showQRCode: false, // 生成二维码
      article: {
        question: '', // 问题
        answer: '', // 答案
        origin: null, // 来源
        annex: null, // 附件
      }
    }
  },
  methods: {
    async handleDownload (rawData) {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      if (rawData && rawData.annex && rawData.annex.length > 0) {
        const download = await this.$action('doDownload', { user_id: this.getCookie('uid'), ids: this.$route.query.id, module: 5 })
        if (download) {
          // this.msgSuccess('下载成功')
          // saveAs(this.$uploadUrl + rawData.annex[0], rawData.annex[0].split('/')[rawData.annex[0].split('/').length - 1])
          this.$action('getFileBloc', { id: this.$route.query.id, user_id: this.getCookie('uid'), module: 5 })
        } else {
          this.msgSuccess('下载失败, 请稍后重试.')
        }
      } else {
        this.$message.info('暂无文件附件，无法下载。')
      }
    },
    async handleCollection () {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      if (this.$route.query.id) {
        const res = await this.$action('doCollection', { user_id: this.getCookie('uid'), ids: this.$route.query.id, module: 5 })
        if (res) {
          this.msgSuccess('收藏成功')
        } else {
          this.msgError('收藏失败')
        }
      }
    },
    handleShare () {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      this.showShare = true
    },
    showXinLang (rawData) {
      share.toShareXinLang(document.location.protocol + '//' + window.location.host + `/qanda/detail?id=${this.$route.query.id}`, rawData.question ? rawData.question.replace(/<[^>]+>|&[^>]+;/g, '') : '')
    },
    showQQ (rawData) {
      share.toShareQQZone(document.location.protocol + '//' + window.location.host + `/qanda/detail?id=${this.$route.query.id}`, rawData.question ? rawData.question.replace(/<[^>]+>|&[^>]+;/g, '') : '', rawData.answer ? rawData.answer.replace(/<[^>]+>|&[^>]+;/g, '') : '', '')
    },
    showWechat (rawData) {
      this.showQRCode = true
      share.toShareWeChat(document.location.protocol + '//' + window.location.host + `/qanda/detail?id=${this.$route.query.id}`)
    },
    async fetchData () {
      if (this.$route.query.id) {
        const res = await this.$action('getQADetail', { id: this.$route.query.id })
        console.log('getQADetail', res)
        this.article.question = res.question ? res.question : ''
        this.article.answer = res.answer ? res.answer : ''
        this.article.origin = res.origin ? res.origin : []
        this.article.annex = res.annex ? res.annex : []
      }
    }
  },
  mounted () {
    this.fetchData()
    this.$action('setMenus', false)
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
@import '~@/assets/styles/qrcode.scss';
.ques-and-answ-detail {
  padding: 60px 0px 200px 0px;
  width: 1120px;
  margin: 0 auto;
  p {
    padding: 0;
    margin: 0;
  }
  .document-detail__title {
    width: 909px;
    margin: 0 auto;
  }
  .document-detail__content {
    padding: 30px 0px;
    text-indent: 32px;
  }
  /deep/ .a-btn-container {
    display: inline-block;
    margin-right: 17px;
    margin-top: 31px;
  }
  /deep/ .a-btn-container .btn-pattern {
    width: 89px;
    height: 35px;
    font-size: 14px;
    color: #fff;
    background-color: #10F1B5;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.21);
    word-spacing: 0px;
  }
  .image-container {
    margin: 72px 0px;
    height: 466px;
  }
}
</style>
